<style lang="less" >
.page_con {
  padding: 22px 0;
}
.el-table td {
  color: #333;
  font-weight: 400;
  font-size: 22px;
  line-height: 42px;
}
.el-table th > .cell {
  font-weight: bold;
}
.el-table td,
.el-table th {
  padding: 0;
}
.el-table--border,
.el-table--group,
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed,
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed,
.el-table td,
.el-table th.is-leaf,
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-color: #9f9f9f !important;
}
.el-pager li,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  font-size: 24px;
  height: 42px;
  line-height: 42px;
  min-width: 42px;
  border: 1px solid #207a84;
  background: #fff;
  color: #207a84;
  font-weight: normal;
}
.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
  font-size: 24px;
}
.el-table,
.el-table__expanded-cell,
.el-table th,
.el-table tr {
  background: transparent;
}
/*文本溢出出现省略号*/
.text_overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text_center {
  text-align: center;
}

.line{
  width: 1vw;
  text-align: center;
}
.s_t_table_con{
  border: 1px solid #1C97FF;
  height: 35vh;
  padding: 1vh;
}
</style>
<template>
  <div :class="config.tableClass">
    <!-- <div class="s_t_search_con">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="选择责任人">
          <el-select v-model="formInline.region" placeholder="请选择选择责任人">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="该责任人待处理急件">
          <el-input v-model="formInline.user" placeholder="件数"></el-input>
        </el-form-item>
        <el-form-item label="指派急件数" prop="age" :rules="validateRules.age" >
          <el-input type="age" v-model.number="formInline.age" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="处理时间期限">
          <div class="inline_box">
            <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date1" style="width: 100%" ></el-date-picker>
          </div>
          <div class="inline_box line">-</div>
          <div  class="inline_box">
            <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date2" style="width: 100%" ></el-date-picker>
          </div>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="s_t_table_con">
      <el-table
        ref="row"
        :data="tableData"
        :stripe="config.isStripe"
        :border="config.isBorder"
        style="width: 100%"
        :height="config.tableHeight"
        align="center"
        :row-class-name="fitRowClassName"
        :cell-class-name="fitCellClassName"
        @row-click="rowClick"
        @cell-click="cellClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-for="(item, i) in data.columns"
          :key="i"
          :type="item.type || ''"
          :prop="item.field || ''"
          :label="item.title"
          :width="item.type == 'index' ? 80 : item.width || 'auto'"
          :align="item.align || 'center'"
          :labelClassName="item.thClass"
          :formatter="item.formatter"
        >
        <template slot="header" slot-scope="scope">
          <span>{{ item.title }}</span>
        </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
/**
 * 默认表格居中显示，若哪一列不居中，设置align: left/right/center
 * params 中不要传分页参数
 * pageSize可不传,默认10
 */
import { dateFormat } from "./lib/common";
export default {
  name: "SearchTable",
  props: {
    data: Object,
    config: Object
  },
  data() {
    return {
      tableData: [],
      formInline: {
        user: "",
        region: "",
        age: 0,
      },
      validateRules:{
        age:[
            { required: true, message: '年龄不能为空' },
            { type: 'number', message: '年龄必须为数字值' },
          ]
      }
    };
  },
  methods: {
    fitCellClassName(obj){
      //row, column, rowIndex, columnIndex
      return (this.config.fitCellClassName&&this.config.fitCellClassName(obj))||'';
    },
    fitRowClassName(obj){
      // row, rowIndex
      return (this.config.fitRowClassName&&this.config.fitRowClassName(obj))||'';
    },
    indexClass(index,classData){
      if(typeof classData == 'string'){
        return classData;
      }else if(typeof classData == 'object'){
        return classData[index] || '';
      }
    },
    dataFieldClass(value,classData){
      if(typeof classData == 'string'){
        return classData;
      }else if(typeof classData == 'object'){
        return classData[value] || '';
      }

    },
    dateFormat(dateStr) {
      return dateFormat(dateStr);
    },
    getData(pageIndex) {
      
    },
    onSubmit() {
      console.log("submit!");
    },
    handleSelectionChange(selections) {//选中数据数组
      this.EventBus.$emit('handleTableSelect',selections)
    },
    onCancel() {
      console.log("submit!");
    },
    rowClick(row, column, event) {
      //单击行
      //row 选中行的数据
      // console.log(row, column, event)
      if (this.cellClickRes) {
        this.cellClickRes(row);
      }
    },
    cellClick(row, column, cell, event) {
      //单击单元格
      if (this.cellClickParams && this.cellClickParams[column.property]) {
        console.log(column.property, this.cellClickParams[column.property]);
      }
      console.log(row, column, cell)
      this.EventBus.$emit("handleTableClick", {
        field: column.property,
        data: row,
      });
    },
  },
  watch: {
    datas: {
      handler(val) {
        if (val) {
          this.tableData = this.data.datas;
        }
      },
      deep: true,
    },
  },
  mounted() {
    if (this.data.datas) {
      this.tableData = this.data.datas;
    } else {
      this.getData(0);
    }
  },
};
</script>
